<template>
  <section>
    <div class="wrapper">
      <h2>{{ category }}</h2>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多数据了"
        @load="onLoad"
      >
        <ul>
          <li
            v-for="(item, index) in activityList"
            :key="index"
            @click="$troute.query('maNow', item.id)"
          >
            <a><img v-if="item.activityPicture" :src="'/api/file/' + item.activityPicture" alt="" /></a>
            <div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.startTime }}</p>
            </div>
          </li>
        </ul>
      </van-list>
    </div>
  </section>
</template>
<script>
import api from "@/data/api/index.js";
import Vue from "vue";
import { List } from "vant";

Vue.use(List);

export default {
  data() {
    return {
      category: "当前活动", //活动类别
      activityList: [], //活动列表
      count: 0,
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 10,
      },
    };
  },
  mounted() {

  },
  methods: {
    onLoad() {
      // 异步更新数据
      api.activityNowList(this.params).then((res) => {
        if(res.data?.length > 0){
          res.data.forEach(item => {
          var time = item.startTime.substring(0, item.startTime.length - 3);
          var time2 = item.endTime.substring(0, item.endTime.length - 3);
            item.startTime = time;
            item.endTime = time2;
          });
        }
        this.count = res.count;
        this.activityList.push(...res.data);
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.activityList.length == this.count) {
          this.finished = true;
        } else {
          this.params.page++;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
}
.wrapper {
  padding: 25px 20px;
  h2 {
    position: relative;
    display: inline-block;
    font-size: 20px;
    margin-bottom: 25px;
    z-index: 1;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1px;
      height: 5px;
      background-color: #c9151e;
      z-index: -1;
    }
  }
  ul li {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #fefefe;
    overflow: hidden;
    a {
      float: left;
      width: 100px;
      height: 75px;
      border-radius: 5px;
      overflow: hidden;
      background-color: #eee;

      >img{
width: 100%;
        height: 100%;
      }
    }
    div {
      margin-left: 115px;
      h3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 3em;
        line-height: 1.5em;
        font-size: 16px;
      }
      p {
        margin-top: 8px;
        color: #666;
      }
    }
  }
}
</style>
